<template>
  <view class="basics-form" v-if="rules && rules.length">
    <view
      :class="[
        'basics-form-wrap',
        item.bottomSeparate ? 'bottom-separate' : '',
      ]"
      v-for="(item, index) in rules"
      @click="itemClick(item)"
      :key="index"
      v-show="!item.hidden"
    >
      <!-- 自定义内容，插槽 -->
      <slot
        name="rule"
        :slotKey="item.slotKey"
        :slotData="slotData"
        v-if="item.type == 'slot'"
      ></slot>
      <!-- 自定义内容，html -->
      <view
        v-else-if="item.type == 'custom'"
        class="basics-form-item"
        :style="{
          paddingTop: 0,
          paddingBottom: 0,
          borderColor: item.hiddenBorderBottom ? 'transparent' : '',
        }"
      >
        <view v-html="item.title" />
      </view>
      <view
        v-else
        :class="['basics-form-item', hiddenTitle ? 'hidden-title' : '']"
        :style="{
          borderColor: item.hiddenBorderBottom ? 'transparent' : '',
        }"
      >
        <view
          class="flex-view"
          :style="{
            flexWrap:
              hiddenTitle && item.leftIocn && item.type == 'textarea'
                ? 'no-wrap'
                : 'wrap',
          }"
        >
          <view style="display: flex">
            <!-- 图标 -->
            <text
              :class="['iconfont', `icon-${item.leftIocn}`, 'left-icon']"
              v-if="item.leftIocn"
            />
            <!-- 标题标记，红* -->
            <text
              v-if="!hiddenTitle && !hiddenMustIcon && !item.skip"
              class="must"
              >*</text
            >
            <!-- 标题 -->
            <text
              class="title"
              v-if="!hiddenTitle"
              :style="{ color: item.titleColor }"
            >
              {{ item.title }}
            </text>
          </view>
          <view
            class="flex-view-content"
            :class="[item.showRightArrow ? 'right-arrow' : '']"
            :style="{
              justifyContent: !hiddenTitle ? 'flex-end' : '',
              width: item.type == 'textarea' ? '100%' : '',
            }"
          >
            <!-- 加入自定义内容，插槽 ，slotOrder=3？左侧 ：右侧-->
            <view
              :style="{
                order: item.slotOrder
                  ? item.slotOrder == 'left'
                    ? 1
                    : 3
                  : hiddenTitle
                  ? 3
                  : 1,
              }"
              style="line-height: 40rpx"
            >
              <slot
                name="inside"
                :ruleKey="item.name"
                :slotData="slotData"
              ></slot>
            </view>

            <!-- 文字text  数字digit -->
            <input
              v-if="item.type == 'text' || item.type == 'digit' || showPassword"
              :maxlength="item.maxlength"
              :disabled="item.disabled || showActionSheet || showDateTime"
              :type="item.type == 'password' ? 'text' : item.type || 'text'"
              v-model="param[item.name]"
              :name="item.name"
              placeholder-class="placeholder"
              :placeholder="item.placeholder"
              class="input"
              :style="{
                width: item.contentWidth || '',
                maxWidth: !hiddenTitle ? '60vw' : '',
                color: item.valueColor,
              }"
              @blur="
                (e) => {
                  inputChange(e, item);
                }
              "
            />
            <!-- 文本域 -->
            <textarea
              v-else-if="item.type == 'textarea'"
              disable-default-padding
              :style="{ marginTop: hiddenTitle ? '0rpx' : '' }"
              :disabled="item.disabled || showActionSheet || showDateTime"
              v-model="param[item.name]"
              :maxlength="item.maxlength"
              placeholder-class="placeholder"
              :name="item.name"
              :placeholder="item.placeholder"
            />
            <!-- 密码password -->
            <input
              v-else-if="item.type == 'password' && !showPassword"
              :maxlength="item.maxlength"
              :disabled="item.disabled || showActionSheet"
              :type="item.type"
              v-model="param[item.name]"
              :name="item.name"
              placeholder-class="placeholder"
              :placeholder="item.placeholder"
              class="input"
              :style="{
                width: item.contentWidth || '',
                maxWidth: !hiddenTitle ? '60vw' : '',
              }"
            />
            <!-- 单选select -->
            <text
              style="order: 2"
              v-else-if="item.type == 'select'"
              @click="openActionsheet(index, item)"
              :class="[
                (!param[item.name] && parseInt(param[item.name]) !== 0) ||
                !item.selectList[param[item.name]].name
                  ? 'placeholder'
                  : '',
              ]"
              >{{
                param[item.name] || parseInt(param[item.name]) === 0
                  ? item.selectList[param[item.name]].name
                  : item.placeholder
              }}
            </text>
            <!-- 多选choose -->
            <text
              style="order: 2"
              v-else-if="item.type == 'choose'"
              @click="openActionsheet(index, item)"
              :class="[!item.chooseCount ? 'placeholder' : '']"
              >{{ item.chooseCount || item.placeholder }}
            </text>
            <!-- 单选radio,直接列出所有选项 -->
            <view
              v-else-if="item.type == 'radio'"
              class="subsection-view"
              :style="{
                justifyContent: !hiddenTitle ? 'flex-end' : 'flex-start',
              }"
            >
              <subsection
                :width="item.contentWidth || '40vw'"
                :height="'40rpx'"
                :selectIndex="
                  parseInt(param[item.name]) != null ? param[item.name] : -1
                "
                :itemList="item.selectList"
                @selected="actionsheetSelect($event, index)"
              />
            </view>
            <!-- 多选tabSelect，直接展示出所有选项 -->
            <view class="tab-select-wrap" v-else-if="item.type == 'tabSelect'">
              <view
                v-for="(it, ind) in item.selectList"
                :key="ind"
                class="tab-select-item"
                :style="{
                  width: item.contentWidth || '',
                  minWidth: item.contentWidth || '90rpx',
                }"
                @click="tabSelectOption(item, ind, index, item.callback)"
                :class="[
                  param[item.name] && param[item.name].indexOf(ind) > -1
                    ? 'tab-select-active'
                    : '',
                ]"
                >{{ it.name }}</view
              >
            </view>
            <!-- 时间 -->
            <datetime-picker
              style="order: 2"
              v-else-if="
                item.type == 'selectDate' ||
                item.type == 'datetime' ||
                item.type == 'daterange'
              "
              :bottomSafe="bottomSafe"
              :placeholder="item.placeholder"
              :type="item.type == 'selectDate' ? 'date' : item.type"
              :hide-second="item.hideSecond"
              :clear-icon="false"
              :border="false"
              :value="param[item.name]"
              @change="
                (e) => {
                  timeChange(e, item);
                }
              "
              @setShowDateTime="showDateTime = !showDateTime"
            />
            <!-- 时间 ,仅年，年月-->
            <picker
              v-else-if="item.type == 'year'"
              mode="date"
              :fields="item.type"
              :value="item.type"
              :start="item.startTime"
              :end="item.endTime"
              @change="
                (e) => {
                  param[item.name] = e.detail.value;
                }
              "
            >
              <input
                disabled
                v-model="param[item.name]"
                placeholder-class="placeholder"
                :placeholder="item.placeholder"
                class="input"
              />
            </picker>
            <!-- 范围，数字 -->
            <view
              class="range-input-wrap"
              v-else-if="item.type == 'numberRange'"
            >
              <input
                type="digit"
                :disabled="item.disabled || showActionSheet"
                v-model="param[item.name]"
                placeholder-class="placeholder"
                :placeholder="item.numberRangePlaceholder[0]"
                class="input"
              />
              <view>-</view>
              <input
                type="digit"
                :disabled="item.disabled || showActionSheet"
                v-model="param[item.rangeKey]"
                placeholder-class="placeholder"
                :placeholder="item.numberRangePlaceholder[1]"
                class="input"
              />
            </view>
            <!-- 地址 -->
            <text
              style="order: 2"
              v-else-if="item.type == 'address'"
              @click="chooseLocation(item)"
              :class="[
                !param[item.name] || !param[item.name].length
                  ? 'placeholder'
                  : '',
              ]"
              >{{
                param[item.name]
                  ? param[item.name][0] +
                    param[item.name][1] +
                    param[item.name][2]
                  : item.placeholder
              }}
            </text>
            <!-- 开关 -->
            <switch
              style="order: 2"
              v-else-if="item.type == 'switch'"
              :checked="param[item.name] == 1"
              :color="$util.getThemeColor()"
              @change="actionsheetSelect($event, index)"
            />
            <!-- 图片单选 -->
            <view
              v-else-if="item.type == 'img' && item.imgCount < 2"
              class="picture"
            >
              <image
                v-if="param[item.name]"
                :src="param[item.name]"
                @click="imgClick(item.name, item.disabled)"
              />
              <text
                v-else-if="!item.disabled"
                @click="chooseImg(item.name, item.disabled, item.imgCount)"
                class="iconfont icon-tianjiatupian_huaban"
              ></text>
            </view>
            <!-- 图片多选 -->
            <view
              v-else-if="item.type == 'img' && item.imgCount > 1"
              class="picture picture-list"
            >
              <image
                v-for="(it, ind) in param[item.name]"
                :key="ind"
                :src="it"
                :style="{ marginTop: ind < 4 ? '0rpx' : '20rpx' }"
                @click="imgClick(item.name, item.disabled, ind)"
              />
              <text
                v-if="!item.disabled && param[item.name].length < item.imgCount"
                @click="chooseImg(item.name, item.disabled, item.imgCount)"
                class="iconfont icon-tianjiatupian_huaban"
                :style="{
                  marginTop:
                    param[item.name].length < 4
                      ? param[item.name].length < 1
                        ? '0rpx'
                        : '28rpx'
                      : '48rpx',
                }"
              ></text>
            </view>
          </view>
        </view>

        <!-- ---------------------扩展内容-------------------------------- -->
        <!-- 多选choose选择的值 -->
        <view
          class="xq-disabled chooseValue"
          style="text-align: right"
          v-if="item.type == 'choose' && item.chooseValue"
          >{{ item.chooseValue }}</view
        >
        <!-- select或者choose输入自定义内容 -->
        <view
          style="width: 100%"
          v-if="item.selectInputKey && item.selectInputByIndex > -1"
        >
          <input
            v-if="
              item.type == 'select' &&
              param[item.name] == item.selectInputByIndex
            "
            v-model="param[item.selectInputKey]"
            placeholder-class="placeholder"
            :placeholder="
              '请输入' + item.selectList[item.selectInputByIndex].name
            "
            class="select-input"
          />
          <view v-if="item.type == 'choose'">
            <input
              v-if="
                param[item.name] &&
                param[item.name].indexOf(item.selectInputByIndex) > -1
              "
              v-model="param[item.selectInputKey]"
              placeholder-class="placeholder"
              :placeholder="
                '请输入' + item.selectList[item.selectInputByIndex].name
              "
              class="select-input"
            />
          </view>
        </view>
        <!-- 提示 -->
        <view class="xq-disabled tips" v-if="item.tips">{{ item.tips }}</view>
        <!-- 文本域字数 -->
        <view class="textarea-num" v-if="item.type == 'textarea'"
          >{{
            param[item.name] != null ? param[item.name].toString().length : 0
          }}/{{ item.maxlength }}</view
        >
      </view>
    </view>

    <action-sheet
      v-if="ruleindex > -1"
      :bottomSafe="bottomSafe"
      :show="showActionSheet"
      :selectedIndex="choose ? -1 : param[rules[ruleindex].name]"
      :choose="choose"
      :chooseList="choose ? param[rules[ruleindex].name] : []"
      :tips="'请选择' + rules[ruleindex].title"
      :item-list="rules[ruleindex].selectList"
      :mask-closable="true"
      :color="'#9a9a9a'"
      :size="26"
      :is-cancel="true"
      @click="actionsheetSelect"
      @cancel="showActionSheet = false"
    ></action-sheet>
  </view>
</template>

<script>
import QQMapWX from "@/common/qqmap-wx-jssdk.js";
import form from "@/common/tui-validation.js";
import subsection from "./components/subsection/subsection.vue";
import actionSheet from "./components/tui-actionsheet/tui-actionsheet.vue";
import datetimePicker from "./components/uni-datetime-picker/uni-datetime-picker.vue";
export default {
  components: { subsection, actionSheet, datetimePicker },
  props: {
    bottomSafe: {
      //底部安全距离
      type: Boolean,
      default: true,
    },
    hiddenMustIcon: {
      //隐藏必填*号
      type: Boolean,
      default: false,
    },
    slotData: {
      type: Object,
      default: () => ({}),
    },
    showPassword: {
      //是否显示密码
      type: Boolean,
      default: false,
    },
    hiddenTitle: {
      //隐藏标题模式
      type: Boolean,
      default: false,
    },
    immediatelyValid: {
      //立即校验
      type: Boolean,
      default: false,
    },
  },
  watch: {
    param: {
      handler(new_value, old_value) {
        if (this.immediatelyValid) {
          this.formValid(0, false);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      param: {},
      rules: [],
      showActionSheet: false,
      showDateTime: false,
      ruleindex: -1,
      disabled: true,
      goBack: false,
      choose: false, //多选
      qqmap: null,
    };
  },
  created(options) {
    this.qqmap = new QQMapWX({
      key: this.$util.qqMapKey,
    });
  },
  methods: {
    //构建表单  选择器类型的value传下标 或 下标的list
    initForm(rules) {
      this.rules = [];
      this.param = {};

      rules.forEach((item, index) => {
        let placeholder = "请输入",
          selectTypes = [
            "address",
            "select",
            "choose",
            "selectDate",
            "datetime",
            "daterange",
            "tabSelect",
            "img",
            "radio",
          ];
        let typeIndex = selectTypes.indexOf(item.type);
        if (typeIndex > -1) {
          placeholder = "请选择";
          if (typeIndex < 6 && !item.disabled) {
            item.showRightArrow = true;
          }
        }

        if (!item.title) {
          item.title = "";
        }
        let ruleItem = {
          name: item.key || item.slotKey || "",
          type: item.type == "number" ? "digit" : item.type || "text", //类型

          skip: item.type == "custom" || item.skip || false, //不必填
          rule: item.skip
            ? item.ruleList || []
            : ["required"].concat(item.ruleList || []), //校验规则
          msg: item.skip
            ? item.ruleMsgList || []
            : [placeholder + item.title].concat(item.ruleMsgList || []), //校验规则的提示语句

          valueColor: item.valueColor || "",

          bottomSeparate: item.bottomSeparate || false, //底部分隔效果
          hidden: item.hidden || false, //隐藏该item, 也不校验
          leftIocn: item.leftIocn || false, //左侧图标

          addressDetailsKey: item.addressDetailsKey || "", //地址详情字段
          addressCoordinateKey: item.addressCoordinateKey || "", //地址坐标字段
          imgCount: item.imgCount || 1, //图片可选数量
          slotOrder: item.slotOrder || false,

          validFunc: item.validFunc, //需要进行传入的方法校验
          customValid: item.customValid || false, //是否需要返回父组件进行校验
          hideSecond: item.hideSecond || false, //type=selectDateTime时，是否隐藏 秒
          chooseValue: item.chooseValue || "", //多选的值
          chooseCount: item.chooseCount || 0, //多选的数量
          numberRangePlaceholder:
            item.type == "numberRange"
              ? item.numberRangePlaceholder || ["起始", "结束"]
              : false,
          rangeKey: item.rangeKey || "",
          placeholder:
            item.disabled && !item.placeholder
              ? ""
              : item.placeholder ||
                placeholder + (this.hiddenTitle ? item.title : ""),
          password: item.type == "password" ? true : false,
          tips: item.tips,
          title: item.title,
          titleColor: item.titleColor || false,
          maxlength: item.maxlength || 300,
          disabled: item.disabled || false,
          itemClick: item.itemClick || false, //item点击事件是否回调
          callback: item.callback || false, //选择器是否实时回调
          selectKey: item.selectKey || false, //选择器返回的key  //默认是下标
          selectShowKey: item.selectShowKey || false, //选择器显示的key  //默认name
          selectOrigin: item.selectOrigin || false, //选择器是否返回原始数据 开启后selectKey无效
          selectListTemp: item.selectList, //保存原始选项数据
          slotKey: item.slotKey || "", //用于表示插槽

          contentWidth: item.contentWidth || false,
          hiddenBorderBottom: item.hiddenBorderBottom || false, //隐藏下划线
          showRightArrow: item.showRightArrow || false, //输入类型也显示右箭头
          maxSelectCount: item.maxSelectCount || 10000000, //最大选择个数，目前之适用于type=tabSelect
          selectInputByIndex: item.selectInputByIndex || -1, //选择器选择某个下标后需要输入自定义内容
          selectInputKey: item.selectInputKey || false, //接受自定义内容的字段
          selectInputRuleList:
            item.selectInputByIndex > -1
              ? ["required"].concat(item.selectInputRuleList || [])
              : [],
          selectInputRuleMsgList:
            item.selectInputByIndex > -1
              ? [
                  item.title +
                    "：请输入" +
                    item.selectList[item.selectInputByIndex].name,
                ].concat(item.selectInputRuleMsgList || [])
              : [],
        };
        let selectList = [];
        if (item.selectList && item.selectList.length) {
          item.selectList.forEach((it, ind) => {
            if (typeof it != "object") {
              if (item.type == "radio") {
                selectList.push(it);
              } else {
                selectList.push({ name: it });
              }
            } else {
              let name = item.selectShowKey
                ? it[item.selectShowKey]
                : it.name || "";
              if (item.type == "radio") {
                selectList.push(name);
              } else {
                selectList.push({ name });
              }
            }
          });
        }
        ruleItem.selectList = selectList; //选择器选择时展示用

        if (item.key && item.type != "custom") {
          this.param[item.key] =
            item.value != undefined
              ? item.value
              : item.type == "choose" ||
                item.type == "checkbox" ||
                item.type == "tabSelect" ||
                item.type == "daterange" ||
                item.imgCount > 1
              ? []
              : "";
        }
        if (item.type == "numberRange") {
          this.param[item.rangeKey] =
            item.rangeValue != undefined ? item.rangeValue : "";
        }
        if (item.selectInputByIndex > -1 && item.selectInputKey) {
          this.param[item.selectInputKey] =
            item.selectInputValue != undefined ? item.selectInputValue : "";
        }
        if (item.type == "choose") {
          ruleItem.chooseValue = this.getChooseValue(ruleItem);
          ruleItem.chooseCount = this.param[item.key].length
            ? "已选" + this.param[item.key].length + "项"
            : "";
        }
        this.rules.push(ruleItem);
      });
      this.param = JSON.parse(JSON.stringify(this.param));
    },
    //表单重置 暂无法触发选择器回调
    formReset() {
      for (let key in this.param) {
        this.param[key] = null;
        // if (typeof this.param[key] == "string" || typeof this.param[key] == "number") {
        //   this.param[key] = null;
        // } else {
        //   this.param[key] = [];
        // }
      }
      this.rules.forEach((item) => {
        item.chooseValue = null;
        item.chooseCount = "";
      });
    },
    //表单验证
    formValid(start = 0, submit = true) {
      if (!start) {
        start = 0;
      }
      if (start >= this.rules.length) {
        if (submit) {
          this.formSubmit();
        }
        return;
      }
      let tempParam = JSON.parse(JSON.stringify(this.param));
      let validError = this.rules.some((item, index) => {
        if (!item.name || item.hidden) {
          return false;
        }
        if (index >= start) {
          let checkRes = null;
          if (item.type == "slot" && !this.skip) {
            if (item.validFunc) {
              checkRes = item.validFunc(tempParam);
            }
            if (checkRes) {
              if (submit) {
                this.$util.showToast(checkRes);
              }
              return true;
            } else if (item.customValid) {
              this.$emit("customValid", { rule: item, data: tempParam, index });
              return true;
            }
          } else {
            let temp = JSON.parse(JSON.stringify(item));
            if (temp.skip) {
              if (temp.rule.length && temp.rule[0] == "required") {
                temp.rule = temp.rule.splice(0, 1);
                temp.msg = temp.rule.splice(0, 1);
              }
            }
            let param = {};
            if (Array.isArray(tempParam[item.name])) {
              param[item.name] =
                tempParam[item.name] != undefined &&
                tempParam[item.name] != null
                  ? tempParam[item.name].length || ""
                  : "";
            } else {
              param[item.name] =
                tempParam[item.name] != undefined &&
                tempParam[item.name] != null
                  ? tempParam[item.name] + ""
                  : "";
            }
            if (!item.skip && item.numberRangePlaceholder) {
              temp.msg[0] =
                item.placeholder +
                item.title +
                " - " +
                item.numberRangePlaceholder[0];
            }
            checkRes = form.validation(param, [temp], !submit);
            if (!checkRes && item.type == "numberRange") {
              param = {};
              param[item.rangeKey] = tempParam[item.rangeKey];
              temp.name = item.rangeKey;
              if (!item.skip && item.numberRangePlaceholder) {
                temp.msg[0] =
                  item.placeholder +
                  item.title +
                  " - " +
                  item.numberRangePlaceholder[1];
              }
              checkRes = form.validation(param, [temp], !submit);
              if (
                !checkRes &&
                tempParam[item.name] &&
                tempParam[item.rangeKey] &&
                Number(tempParam[item.rangeKey]) <= Number(tempParam[item.name])
              ) {
                checkRes =
                  temp.title +
                  "的" +
                  item.numberRangePlaceholder[1] +
                  "必须大于" +
                  item.numberRangePlaceholder[0];
              }
            }
            if (
              !checkRes &&
              item.selectInputByIndex > -1 &&
              item.selectInputKey &&
              ((item.type == "select" &&
                tempParam[item.name] == item.selectInputByIndex) ||
                (item.type == "choose" &&
                  tempParam[item.name].indexOf(item.selectInputByIndex) > -1))
            ) {
              param = {};
              param[item.selectInputKey] = tempParam[item.selectInputKey];
              temp.skip = false;
              temp.name = item.selectInputKey;
              temp.rule = item.selectInputRuleList;
              temp.msg = item.selectInputRuleMsgList;
              checkRes = form.validation(param, [temp], !submit);
            }
            if (!checkRes && item.validFunc) {
              checkRes = item.validFunc(tempParam);
            }
            if (checkRes) {
              if (submit) {
                this.$util.showToast(checkRes);
              }
              return true;
            } else if (item.customValid) {
              this.$emit("customValid", { rule: item, data: tempParam, index });
              return true;
            }
            return false;
          }
        }
      });
      if (validError) {
        console.log("检验error");
        if (!submit) {
          this.$emit("validValue", false, tempParam);
        }
      } else {
        console.log("检验success");
        if (submit) {
          this.formSubmit();
        } else {
          this.$emit("validValue", true, tempParam);
        }
      }
    },
    //修改rule某个属性的值
    changeRulesValue(data) {
      data.forEach((item) => {
        if (item.key == "selectList") {
          let selectList = [];
          if (item.value && item.value.length) {
            item.value.forEach((it, ind) => {
              if (typeof it != "object") {
                if (item.type == "radio") {
                  selectList.push(it);
                } else {
                  selectList.push({ name: it });
                }
              } else {
                let name = this.rules[item.index].selectShowKey
                  ? it[this.rules[item.index].selectShowKey]
                  : it.name || "";
                if (this.rules[item.index].type == "radio") {
                  selectList.push(name);
                } else {
                  selectList.push({ name });
                }
              }
            });
          }
          this.rules[item.index].selectListTemp = item.value;
          this.rules[item.index][item.key] = selectList;
        } else {
          this.rules[item.index][item.key] = item.value;
        }
      });
    },
    //修改param某个属性的值
    changeParamValue(data) {
      this.param[data.key] = data.value;
    },
    //表单提交
    formSubmit() {
      let param = JSON.parse(JSON.stringify(this.param));
      this.rules.forEach((item) => {
        //处理选择器数据
        if (item.selectOrigin || item.selectKey) {
          //返回的数据 原始数据 ，对象key，否则下标
          if (item.type == "choose" || item.type == "tabSelect") {
            let chooseList = [];
            item.selectListTemp.forEach((it, index) => {
              if (param[item.name].indexOf(index) > -1) {
                chooseList.push(item.selectOrigin ? it : it[item.selectKey]);
              }
            });
            param[item.name] = chooseList;
          } else if (
            item.type == "select" ||
            item.type == "switch" ||
            item.type == "radio"
          ) {
            item.selectListTemp.some((it, index) => {
              if (param[item.name] == index) {
                param[item.name] = item.selectOrigin ? it : it[item.selectKey];
                return true;
              }
            });
          }
        }
      });
      console.log(param, "数据");
      //提交数据
      this.$emit("submit", param);
    },

    //打开选择弹窗
    openActionsheet(index, item) {
      if (item.disabled) {
        return;
      }
      this.ruleindex = index;
      this.$nextTick(() => {
        this.choose = item.type == "choose";
        this.showActionSheet = true;
      });
    },
    //item点击事件
    itemClick(item) {
      this.$emit("itemClick", { item, value: this.param[item.name] });
    },
    //图片点击事件
    imgClick(key, disabled, ind) {
      console.log(disabled, "---");
      if (disabled) {
        this.previewImg(key);
        return;
      }
      uni.showActionSheet({
        itemList: ["预览", "更换", "删除"],
        success: (res) => {
          if (res.tapIndex == 0) {
            this.previewImg(key, ind);
          } else if (res.tapIndex == 1) {
            this.chooseImg(key, false, 1, ind);
          } else if (res.tapIndex == 2) {
            if (ind === undefined) {
              this.param[key] = "";
            } else {
              this.param[key].splice(ind, 1);
            }
            this.rules.some((item) => {
              if (item.name == key) {
                if (item.callback) {
                  this.$emit("pictureCallback", {
                    key: key,
                    name: item.title,
                    url: this.param[key],
                  });
                }
                return true;
              }
            });
          }
        },
      });
    },
    //图片预览
    previewImg(key, ind) {
      if (!key || !this.param[key]) {
        return;
      }
      if (ind === undefined) {
        uni.previewImage({
          current: 0, // 当前显示图片的http链接
          urls: [this.param[key]], // 需要预览的图片http链接列表
        });
      } else {
        uni.previewImage({
          current: ind, // 当前显示图片的http链接
          urls: this.param[key], // 需要预览的图片http链接列表
        });
      }
    },
    //选择图片
    chooseImg(key, disabled, count = 1, ind) {
      if (disabled) {
        return;
      }
      uni.chooseImage({
        count: count > 1 ? count - (this.param[key].length || 0) : 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          if (res.tempFilePaths.length) {
            if (count > 1) {
              if (!this.param[key]) {
                this.param[key] = [];
              }
              this.param[key] = this.param[key].concat(res.tempFilePaths);
              this.param[key].push('');
              this.$nextTick(() => {
                this.param[key].splice(this.param[key].length - 1, 1);
              });
            } else if (ind === undefined) {
              this.param[key] = res.tempFilePaths[0];
            } else {
              this.$set(this.param[key], ind, res.tempFilePaths[0]);
            }
            this.rules.some((item) => {
              if (item.name == key) {
                if (item.callback) {
                  this.$emit("pictureCallback", {
                    key: key,
                    name: item.title,
                    url: this.param[key],
                  });
                }
                return true;
              }
            });
          }
        },
      });
    },
    //选择地址
    chooseLocation(item) {
      uni.chooseLocation({
        success: (r) => {
          if (item.addressCoordinateKey) {
            this.param[item.addressCoordinateKey] = {
              latitude: r.latitude,
              longitude: r.longitude,
            };
          }
          this.qqmap.reverseGeocoder({
            location: {
              latitude: r.latitude,
              longitude: r.longitude,
            },
            success: (res) => {
              //成功后的回调
              this.param[item.name] = [
                res.result.address_component.province,
                res.result.address_component.city,
                res.result.address_component.district,
              ];
              this.param[item.addressDetailsKey] = r.name;
            },
            fail: (error) => {
              this.$util.showModal("error1 " + JSON.stringify(error));
            },
            complete: (res) => {},
          });
        },
        fail: (r) => {
          uni.getSetting({
            success: (res) => {
              // this.$util.showModal('getSetting ' + JSON.stringify(res))
              var statu = res.authSetting;
              if (!statu["scope.userLocation"]) {
                uni.showModal({
                  title: this.$t("my.is_auth"),
                  content: this.$t("auth_tip"),
                  success: (tip) => {
                    if (tip.confirm) {
                      uni.openSetting({
                        success: (data) => {
                          if (data.authSetting["scope.userLocation"] === true) {
                            this.$util.showSuccessToast(
                              this.$t("my.auth_success")
                            );
                            setTimeout(() => {
                              this.chooseLocation();
                            }, 1000);
                          }
                        },
                      });
                    } else {
                      this.$util.showErrorToast(this.$t("my.auth_error"));
                    }
                  },
                });
              }
            },
          });
        },
      });
    },
    //tabSelect选择
    tabSelectOption(rule, index, ruleindex, callback) {
      let key = rule.name;
      let list = this.param[key] || [];
      if (list.indexOf(index) < 0) {
        list.push(index);
        if (list.length > rule.maxSelectCount) {
          list.splice(0, 1);
        }
      } else {
        list.splice(list.indexOf(index), 1);
      }
      if (callback) {
        let value = [];
        if (rule.selectOrigin || rule.selectKey) {
          rule.selectListTemp.forEach((it, index) => {
            if (list.indexOf(index) > -1) {
              value.push(rule.selectOrigin ? it : it[rule.selectKey]);
            }
          });
        } else {
          value = list;
        }
        this.$emit("selectCallback", {
          key,
          value,
          chooseList: list,
          ruleindex,
        });
      }
      this.param[key] = list;
    },
    //文字改变，复用选择器回调
    inputChange(e, item) {
      console.log(e, item, "===");
      if (item.callback) {
        this.$emit("selectCallback", {
          key: item.name,
          value: e.detail.value != undefined ? e.detail.value : e.target._value,
        });
      }
    },
    //时间改变
    timeChange(e, item) {
      this.param[item.name] = e;
      if (item.callback) {
        this.$emit("selectCallback", {
          key: item.name,
          value: e,
        });
      }
    },
    //选择
    actionsheetSelect(e, ruleindex) {
      console.log(e, "---");
      if (ruleindex != undefined && ruleindex != null) {
        this.ruleindex = ruleindex;
      }
      if (typeof e != "object") {
        //radio类型
        e = { index: e };
      }
      if (e.detail) {
        //开关类型
        if (e.detail.value) {
          e.index = 1;
        } else {
          e.index = 0;
        }
      }
      let rule = this.rules[this.ruleindex];
      if (rule.type == "choose") {
        this.param[rule.name] = e.chooseList;
        this.rules[this.ruleindex].chooseValue = this.getChooseValue(rule);
        this.rules[this.ruleindex].chooseCount = this.param[rule.name].length
          ? "已选" + this.param[rule.name].length + "项"
          : "";
      } else {
        this.param[rule.name] = e.index;
      }
      if (e.index !== "") {
        this.showActionSheet = false;
      }
      if (rule.callback) {
        if (rule.type == "choose") {
          let value = [];
          if (rule.selectOrigin || rule.selectKey) {
            rule.selectListTemp.forEach((it, index) => {
              if (e.chooseList.indexOf(index) > -1) {
                value.push(rule.selectOrigin ? it : it[rule.selectKey]);
              }
            });
          } else {
            value = e.chooseList;
          }
          this.$emit("selectCallback", {
            key: rule.name,
            value,
            chooseList: e.chooseList,
            ruleindex: this.ruleindex,
          });
        } else {
          if (e.index !== "" && (rule.selectOrigin || rule.selectKey)) {
            rule.selectListTemp.some((it, index) => {
              if (e.index == index) {
                let value = rule.selectOrigin ? it : it[rule.selectKey];
                this.$emit("selectCallback", {
                  key: rule.name,
                  value,
                  index: e.index,
                  ruleindex: this.ruleindex,
                });
                return true;
              }
            });
          } else {
            this.$emit("selectCallback", {
              key: rule.name,
              value: e.index,
              index: e.index,
              ruleindex: this.ruleindex,
            });
          }
        }
      }
    },
    getChooseValue(item) {
      let str = "";
      if (this.param[item.name] && this.param[item.name].length) {
        let arr = this.param[item.name].sort((a, b) => {
          return a - b;
        });
        arr.forEach((it, index) => {
          str += (index ? "," : "") + item.selectList[it].name;
        });
      }
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-view {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.flex-view-content {
  display: flex;
  align-items: center;
  flex-grow: 2;
  max-width: 100%;
}
.right-arrow::after {
  top: auto !important;
}
.bottom-separate {
  border-bottom: 10rpx solid $back-grey-color;
}
.title {
  color: $font-grey-color;
  display: flex;
  line-height: 46rpx;
}

.must {
  color: #e83112 !important;
  margin-left: -16rpx;
}
.subsection-view {
  order: 2;
  flex-grow: 2;
  display: flex;
  justify-content: flex-end;
}
.input {
  height: 46rpx;
  line-height: 46rpx;
  flex-grow: 2;
  font-size: $default-font-size;
  padding: 0 2px !important;
}
.select-input {
  width: 50%;
  border: 1rpx solid $default-border-color !important;
  border-radius: $default-border-radius;
  margin: 20rpx 0 0 50%;
  padding: 4rpx 10rpx !important;
  font-size: $small-font-size;
}
.range-input-wrap {
  order: 2;
  display: flex;
  align-items: center;
  .input {
    width: 14vw;
    text-align: center;
    flex-grow: 0;
  }
  view {
    margin: 0 6rpx;
  }
}
.chooseValue {
  transform: translateY(10rpx);
  width: 100%;
  font-size: $litte-font-size;
  color: $font-grey-color;
  line-height: $litte-font-size;
}
.tips {
  transform: translateY(20rpx);
  width: 100%;
  font-size: $litte-font-size;
  color: $theme-color;
  line-height: $litte-font-size;
}
textarea {
  order: 2;
  background: white;
  width: 100%;
  height: 200rpx;
  margin: 10rpx 0;
  font-size: $default-font-size;
}
.textarea-num {
  position: absolute;
  right: 40rpx;
  bottom: 6rpx;
  line-height: $small-font-size;
  font-size: $small-font-size;
  color: $font-grey-color;
}
switch {
  transform: scale(0.75);
  position: absolute;
  right: 18rpx;
}
.picture {
  order: 2;
  height: 30rpx;
  text {
    color: $font-grey-color;
    font-size: 110rpx;
    line-height: 30rpx;
    width: 90rpx;
  }

  image {
    width: 90rpx;
    height: 90rpx;
    margin-top: -30rpx;
  }
}
.picture-list {
  display: flex;
  max-width: 60vw;
  flex-wrap: wrap;
  height: auto !important;
  text {
    margin: 0 0 0 20rpx;
  }
  image {
    margin-left: 20rpx;
  }
}
.tab-select-wrap {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  margin-left: -30rpx;
  width: calc(100vw - 40rpx);
  .tab-select-item {
    padding: 6rpx 14rpx;
    margin-left: 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
    max-width: calc(100% - 30rpx);
    border: 1rpx solid $default-border-color;
    border-radius: $default-border-radius;
    font-size: $small-font-size;
    color: $font-grey-color;
  }
  .tab-select-active {
    background: rgba(232, 49, 18, 0.04);
    border-color: $theme-color;
    color: $theme-color;
  }
}
</style>
